<template>
  <div style="padding: 10px">
    <d-edit-table
      :data="tableData"
      :columns="columns"
      border
      ref="dEditTableRef"
      isEditRow
      isCreateRow
      @confirm-row="confirmRow"
      @cancell-row="cancellRow"></d-edit-table>
  </div>
</template>

<script lang="ts" setup>
  import { ElMessage } from 'element-plus'
  import { ref } from 'vue'
  // import { DEditTable } from '../../../lib/d-el-plus.js'

  const tableData = ref([
    { date: '2016-05-03', name: '', address: 'No. 189,s1', checkbox: ['1'] },
    { date: '2016-05-02', name: '', address: 'No. 189, Grovs' },
    { date: '2016-05-04', name: '', address: 'No. 189, Grove St,soihdadhao' }
  ])
  const options = [
    { label: '男', value: '1' },
    { label: '女', value: '2' }
  ]
  const columns = [
    { showIndex: true, width: 50, align: 'center' },
    { label: '日期', prop: 'date', cType: 'date' },
    {
      label: '姓名',
      prop: 'name',
      cType: 'input',
      asterisk: true,
      rules: [{ required: true, message: '哈哈输入', trigger: 'blur' }]
    },
    { label: '地址', prop: 'address', cType: 'input' },
    {
      label: 'checkbox',
      prop: 'checkbox',
      cType: 'checkbox',
      asterisk: true,
      rules: [{ required: true, message: '请选择', trigger: 'change' }],
      formChildConfig: {
        options: options,
        onChange(v) {
          console.log('v: ', v)
        }
      }
    },
    {
      label: '操作',
      cType: 'operation',
      formChildConfig: {
        update: {
          type: 'warning'
        },
        confirm: {
          type: 'danger'
        }
      }
    }
  ]
  const dEditTableRef = ref<InstanceType<typeof DEditTable> | null>(null)
  const confirmRow = (row: any) => {
    console.log('row: ', row)
    ElMessage.success('确定')
  }
  const cancellRow = (row: any) => {
    console.log('row: ', row)
    ElMessage.success('取消')
  }
</script>
<style scoped lang="scss">
  ::v-deep(.el-table) {
    .even-row {
      background-color: #fae7f0;
    }
    .odd-row {
      background-color: #f8e7d9;
    }
  }
</style>
